<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <div th:replace="common/css"></div>
    <link rel="stylesheet" th:href="@{/css/user.css}">
</head>
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">

        <!-- aside -->
        <div th:replace="common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <!-- 功能按钮 -->
                    <el-row :gutter="10" type="flex" justify="space-between">
                        <el-col :xs="24" :sm="12" :lg="6" :span="5">
                            <el-input size="small" v-model="searchEntity.username" placeholder="请输入用户名查询">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6" :span="5">
                            <el-select size="small" v-model="searchEntity.sex" placeholder="请选择性别查询">
                                <el-option key="0" label="所有" value=""></el-option>
                                <el-option key="1" label="男" value="0"></el-option>
                                <el-option key="2" label="女" value="1"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6" :span="5">
                            <el-select size="small" v-model="searchEntity.status" placeholder="请选择用户状态查询">
                                <el-option key="0" label="所有" value=""></el-option>
                                <el-option key="1" label="有效" value="true"></el-option>
                                <el-option key="2" label="锁定" value="false"></el-option>
                            </el-select>
                        </el-col>
                        <el-button @click="search(pageConf.pageCode, pageConf.pageSize)" plain size="small" icon="el-icon-search"></el-button>
                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                            <el-button type="primary" plain size="small" @click="search(pageConf.pageCode, pageConf.pageSize)" icon="el-icon-refresh"></el-button>
                            <el-button type="primary" plain size="small" @click="handleExcel()" icon="el-icon-printer"></el-button>
                            <el-button type="primary" plain size="small" @click="handleDelete()" icon="el-icon-delete"></el-button>
                            <el-button type="primary" plain size="small" @click="handleSave()" icon="el-icon-plus"></el-button>
                        </el-col>
                    </el-row>
                    <br/>
                    <!-- 列表 -->
                    <el-table ref="table" @selection-change="selectChange" :data="list" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" stripe size="mini" border tooltip-effect="dark" style="width: 100%">
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column prop="username" label="用户名" width="200" align="center"></el-table-column>
                        <el-table-column prop="deptName" label="部门" width="200" align="center"></el-table-column>
                        <el-table-column prop="phone" label="手机" width="200" align="center"></el-table-column>
                        <el-table-column prop="sex" label="性别" width="100" align="center">
                            <template slot-scope="scope">
                                {{scope.row.sex == 0 ? '男':'女'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="avatar" label="头像" width="130" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.avatar" width="100" height="100" align="center">
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
                        <el-table-column prop="status" sortable label="状态" width="120" align="center">
                            <template slot-scope="scope">
                                <el-tag>{{scope.row.status == true ? '有效':'无效'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="handleDelete(scope.row.id)" size="mini" icon="el-icon-delete" type="danger"></el-button>
                                <el-button @click="handleSave(scope.row.id)" size="mini" icon="el-icon-edit" type="warning"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br/>
                    <!-- 分页 -->
                    <div class="pagination">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="pageConf.pageCode"
                                       :page-sizes="pageConf.pageOption"
                                       :page-size="pageConf.pageSize"
                                       layout="total, sizes, prev, pager, next"
                                       :total="pageConf.totalPage">
                        </el-pagination>
                    </div>
                    <br/>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <!-- 头像-模态框 -->
    <div th:replace="page/system/my/avatar"></div>

    <!-- 添加-模态框 -->
    <div th:replace="page/system/user/save"></div>
</div>
<div th:replace="common/js"></div>
<script type="text/javascript" th:src="@{/js/system/user.js}"></script>
</body>
</html>
